<template>
  <div class="dashboard-container">
    <!-- <div class="dashboard-text">name: {{ name }}</div> -->
    <div class="flex plr-50 text-center">
      <div style="width: 40%;">
        <p>总部中控大屏</p>
        <div class="flex plr-35">
          <div>总部</div>
          <a href="http://121.199.17.238:8001/" target="_blank">打开</a>
        </div>
        <img src="../../assets/daping/1.png" class="image" alt="">
      </div>
      <div style="width: 40%;">
        <p>服务商中控大屏</p>
        <div class="flex  plr-35">
          <el-select class="w-200" v-model="value1" placeholder="请选择">
            <el-option v-for="item in options1" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
          <a href="http://121.199.17.238:8003" target="_blank">打开</a>
        </div>
        <img src="../../assets/daping/1.png" class="image" alt="">
      </div>
    </div>
    <div class="flex plr-50 text-center mt-20">
      <div style="width: 40%;">
        <p>合伙人中控大屏</p>
        <div class="flex plr-35">
          <el-select class="w-200" v-model="value2" placeholder="请选择">
            <el-option v-for="item in options2" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
          <a href="http://121.199.17.238:8002/" target="_blank">打开</a>
        </div>
        <img src="../../assets/daping/1.png" class="image" alt="">
      </div>
      <div style="width: 40%;">
        <p>交付中心中控大屏</p>
        <div class="flex plr-35">
          <el-select class="w-200" v-model="value3" placeholder="请选择">
            <el-option v-for="item in options3" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
          <a href="http://121.199.17.238:8004/" target="_blank">打开</a>
        </div>
        <img src="../../assets/daping/4.png" class="image" alt="">
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { getcusJiaofuzhongxin, getUserList } from '@/api/hhr.js'
import { getUserList as fwsgetUserList } from '@/api/fws.js'

export default {
  name: 'Dashboard',
  data() {
    return {
      options1: [{
        value: '1',
        label: '华北服务商'
      }, {
        value: '2',
        label: '华东服务商'
      }, {
        value: '3',
        label: '华南服务商'
      }, {
        value: '4',
        label: '华西服务商'
      }],
      value1: '',
      options2: [{
        value: '1',
        label: '华北合伙人'
      }, {
        value: '2',
        label: '华东合伙人'
      }, {
        value: '3',
        label: '华南合伙人'
      }, {
        value: '4',
        label: '华西合伙人'
      }],
      value2: '',
      options3: [{
        value: '1',
        label: '华北交付中心'
      }, {
        value: '2',
        label: '华东交付中心'
      }, {
        value: '3',
        label: '华南交付中心'
      }, {
        value: '4',
        label: '华西交付中心'
      }],
      value3: ''
    }

  },
  mounted() {
    this.getcusJiaofuzhongxin()
    this.getUserList()
    this.fwsgetUserList()
  },
  methods: {
    fwsgetUserList() {
      fwsgetUserList({
        pageNum: 1,
        pageSize: 10000000,
      }).then(res => {
        this.options1 = res.rows
      })
    },
    getUserList() {
      getUserList({
        pageNum: 1,
        pageSize: 10000000,
      }).then(res => {
        this.options2 = res.rows
      })
    },
    getcusJiaofuzhongxin() {
      getcusJiaofuzhongxin({
        pageNum: 1,
        pageSize: 10000000,
      }).then(res => {
        this.options3 = res.rows
      })
    },
  }
}
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }

  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}

a {
  color: #129;
}

.image {
  object-fit: cover;
  width: 90%;
  height: 350px;
  // margin-top: 20px;
  margin: 20px auto 0;
}
</style>
